<template>
    <div class="container">
        <div class="nav">
            <div @click="homepage">首页</div>
            <div>
                <n-popselect v-model:value="selectedCatergory" :options="categoryOptions" trigger="click"
                    @update:value="searchByCategory">
                    <div>分类<span>{{ categoryName }}</span></div>
                </n-popselect>
            </div>
            <div @click="dashboard">后台</div>
        </div>
        <n-divider></n-divider>
        <n-space class="search">
            <n-input v-model:value="pageInfo.keyword" :style="{ width: '500px' }" placeholder="请输入关键字"></n-input>
            <n-button type="primary" ghost @click="loadBlogs">搜索</n-button>
        </n-space>
        <div v-for="(item, index) in blogListInfo" :key="index" style="margin-bottom: 15px; cursor: pointer;">
            <n-card :title=item.title @click="toBlogDetail(item)">
                {{ item.content }}
                <template #footer>
                    <n-space align="center">
                        <div>发布时间：{{ item.create_time }}</div>
                    </n-space>
                </template>
            </n-card>
        </div>
        <n-pagination v-model:page="pageInfo.page" :page-count="pageInfo.page_count" @update:page="loadBlogs" />

        <n-divider></n-divider>
        <div class="footer">
            <div>Power by Zhigeng</div>
            <div>XICP备xxxx号-1</div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const axios = inject('axios')
const message = inject('message')
const dialog = inject('dialog')

const selectedCatergory = ref(0)
const categoryOptions = ref([])


onMounted(() => {
    loadCategories()
    loadBlogs()
})

const categoryName = computed(() => {
    let selectedOption = categoryOptions.value.find(item => item.value === selectedCatergory.value)
    return selectedOption ? selectedOption.label : ''
})

const loadCategories = async () => {
    let results = await axios.get('/category/getList')
    if (results.err == null) {
        // console.log(results)
        categoryOptions.value = results.data.results.map(item => {
            return {
                label: item.name,
                value: item.id
            }
        })
    }
}

const homepage = () => {
    router.push('/')
}

const dashboard = () => {
    router.push('/login')
}


// 分页
const pageInfo = reactive({
    page: 1,
    page_size: 3,
    page_count: 0,
    count: 0,
    keyword: '',
    category_id: 0
})

const blogListInfo = ref([])

const loadBlogs = async () => {
    let results = await axios.get(`/blog/search?page=${pageInfo.page}&page_size=${pageInfo.page_size}&category_id=${pageInfo.category_id}&keyword=${pageInfo.keyword}`)
    // console.log(results)
    let temp_results = results.data.data.results
    for (let item of temp_results) {
        item.content += '...'
        let d = new Date(item.create_time)
        item.create_time = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
    }
    blogListInfo.value = temp_results
    pageInfo.count = results.data.data.count
    pageInfo.page_count = Math.ceil(pageInfo.count / pageInfo.page_size)
    // console.log(pageInfo)
}

// 博客跳转
const toBlogDetail = item => {
    router.push(`/detail?id=${item.id}`)
}

const searchByCategory = async (category_id) => {
    pageInfo.category_id = category_id
    loadBlogs()
}

</script>

<style lang="scss" scoped>
.container {
    width: 1200px;
    margin: 0 auto;

    .nav {
        display: flex;
        font-size: 20px;
        padding-top: 20px;
        color: #64676a;

        div {
            cursor: pointer;
            margin-right: 15px;

            &:hover {
                color: orange
            }

            span {
                font-size: 12px;
            }
        }
    }

    .footer {
        text-align: center;
        line-height: 25px;
        color: #64676a;
    }

    .search {
        margin-bottom: 10px;
    }
}


.pageNum {
    cursor: pointer;
}

.pagination {
    border: 1px solid rgba(128, 128, 128, 0.5);
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    border-radius: 5px;
}
</style>